<script setup>
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import LayoutNav from '../Layout/components/LayoutNav.vue';


</script>

<template>
  <LayoutNav></LayoutNav>
  <div class="container">
    <div class="member-box">
      <div class="member-aside">
        <div class="user-manage">
          <el-menu router>
            <el-menu-item index="/member">
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="/member/order">
              <span>我的订单</span>
            </el-menu-item>
          </el-menu>
        </div>
    </div>
    <div class="article">
      <!-- 三级路由的挂载点 -->
      <RouterView />
    </div>
  </div>
  </div>
  <LayoutFooter></LayoutFooter>
</template>

<style scoped lang="scss">
.member-box {
  display: flex;
  padding-top: 10px;
  height: calc(100vh - 170px);

  .member-aside {
    width: 220px;
    margin-left: 8%;
    background-color: #fff;


  }
  .member-aside {
  width: 200px; /* 根据需要调整宽度 */
  }



  .el-menu {
    border-right: none; /* 移除默认的右边框 */
  }
  /* 修改选中项的背景颜色和文字颜色 */
  .el-menu .el-menu-item.is-active {
    color: #FA5566 !important;
  }

  /* 修改悬浮时的背景颜色和文字颜色 */
  .el-menu .el-menu-item:hover {
    background-color: #FBEBEB !important;
    color: #606266 !important;
  }
  /* 修改菜单文字大小 */
  .el-menu .el-menu-item span {
    font-size: 18px; /* 根据需要调整字体大小 */
  }

  .article {
    width: 1000px;
    background-color: #fff;
    margin-left: 10px;
  }
}
</style>